<template>
  <div>
    <a-switch :checked="state.mode === 'vertical'" @change="changeMode" />
    Change Mode
    <span class="ant-divider" style="margin: 0 1em" />
    <a-switch :checked="state.theme === 'dark'" @change="changeTheme" />
    Change Theme
    <br />
    <br />
    <div style="display: flex">
      <a-menu style="width: 256px" v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys"
        :mode="state.mode" :theme="state.theme" @click="clickMenu" >
        <a-menu-item v-for="(item) in data" :key="item.menuRouter" >
          <template #icon>
            <!-- {{ item.menuIcon }} -->
            <SmileOutlined />
          </template>
          {{ item.menuName }}
        </a-menu-item>
        
      </a-menu>
      <div style="width: 100%">
        <RouterView></RouterView>
      </div>

    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineComponent, reactive, toRefs, ref } from 'vue';
import axios from 'axios';
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
  SmileOutlined,
  UngroupOutlined
} from '@ant-design/icons-vue';
import { RouterLink, RouterView } from 'vue-router'
import router from '@/router';

getUserPermission();

let data:any = ref([]);
function getUserPermission(){
      axios({
                method:'post',
                url: 'http://localhost:18077/menu/getMenuList',
            }).then(res =>{
                if(res.data.code === "200"){
                    console.log(res.data.data);
                    data.value = res.data.data;
                }
            })
    };

const state = reactive({
  mode: 'inline',
  theme: 'light',
  selectedKeys: ['1'],
  openKeys: ['sub1'],
  ss:'MailOutlined'
});
const changeMode = (checked: boolean) => {
  state.mode = checked ? 'vertical' : 'inline';
};
const changeTheme = (checked: boolean) => {
  state.theme = checked ? 'dark' : 'light';
};
const clickMenu = (menu) => {
  console.log(menu)
  router.push({
    path: menu.key
  })
}
//   return {
//     ...toRefs(state),
//     changeMode,
//     changeTheme,
//     clickMenu
//   };
// },
// components: {
//   MailOutlined,
//   CalendarOutlined,
//   AppstoreOutlined,
//   SettingOutlined,
// },
// });
</script>